<template>
    <div>
        <section class="content-header">应急事后&nbsp;/&nbsp;应急事后管理&nbsp;/&nbsp;应急事后详情</section>
        <section class="content-head clearfix">
            <div class="row c-top">
                <div class="col-md-1">
                    <img
                        :src="form.orderPhotopath && form.orderPhotopath.split(',')[0]"
                        alt="未添加图片"
                    >
                </div>
                <div class="col-md-11">
                    <p>事件名称：{{form.orderName}}</p>
                    <p>编号：{{form.orderId}}</p>
                    <p>事件类别：{{form.orderType}}</p>
                </div>
            </div>
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#activity" data-toggle="tab">事件信息</a>
                        </li>
                        <li ref="nav-tabs1">
                            <a href="#timeline" data-toggle="tab">事件评价</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="active tab-pane" id="activity">
                            <div class="event">
                                <div class="row">
                                    <div class="col-md-12">
                                        <p class="title">
                                            <span>
                                                <em></em>
                                            </span>
                                            <span>基本信息</span>
                                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                        </p>
                                    </div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">责任部门：</div>
                                    <div class="col-md-5">{{form.orderDept}}</div>
                                    <div class="col-md-1">事件来源：</div>
                                    <div class="col-md-5">{{form.orderOrigin}}</div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">责任人：</div>
                                    <div
                                        class="col-md-5"
                                    >{{form.workorderDistribute&&form.workorderDistribute.distributePerson}}</div>
                                    <div class="col-md-1">联系电话：</div>
                                    <div class="col-md-5">{{form.orderPhone}}</div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">事件类别：</div>
                                    <div class="col-md-5">{{form.orderType}}</div>
                                    <div class="col-md-1">联系人姓名：</div>
                                    <div class="col-md-5">{{form.contacts}}</div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">事件等级：</div>
                                    <div class="col-md-5">{{form.orderLevel}}</div>
                                    <div class="col-md-1">片区：</div>
                                    <div class="col-md-5">{{form.orderArea}}</div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">处理时限：</div>
                                    <div class="col-md-5">{{form.orderTimelimit}}</div>
                                    <div class="col-md-1">位置：</div>
                                    <div
                                        class="col-md-5"
                                    >X:{{form.orderX}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y:{{form.orderY}}</div>
                                </div>
                                <div class="row content">
                                    <div class="col-md-1">事件描述：</div>
                                    <div class="col-md-5">
                                        <span class="c-span2">{{form.orderDesc}}</span>
                                    </div>
                                    <div class="col-md-1">管线：</div>
                                    <div class="col-md-5">{{form.orderPipeid}}</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <p class="title">
                                            <span>
                                                <em></em>
                                            </span>
                                            <span>现场照片</span>
                                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                        </p>
                                    </div>
                                </div>
                                <div class="row photo">
                                    <div
                                        class="col-md-1 col-md-offset-1"
                                        v-for="item in (form.orderPhotopath || '').split(',')"
                                        :key="item.value"
                                    >
                                        <img :src="item" alt @click="clickImg($event)">
                                    </div>
                                </div>
                                <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"/>
                            </div>
                        </div>
                        <div class="tab-pane" id="timeline">
                            <div class="huifang">
                                <div class="row">
                                    <div class="col-md-1" style="padding:0;font-weight:700">服务态度：</div>
                                    <div class="col-md-2">
                                        <el-rate
                                            v-model="callback.callbackService"
                                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                                            :disabled="callbackStatus"
                                        ></el-rate>
                                    </div>
                                    <div
                                        class="col-md-1 col-md-offset-3"
                                        style="padding:0;font-weight:700"
                                    >时间：</div>
                                    <div class="col-md-5">{{getDate()}}</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-1" style="padding:0;font-weight:700">工作速度：</div>
                                    <div class="col-md-2">
                                        <el-rate
                                            v-model="callback.callbackSpeed"
                                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                                            :disabled="callbackStatus"
                                        ></el-rate>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-1" style="padding:0;font-weight:700">完成质量：</div>
                                    <div class="col-md-2">
                                        <el-rate
                                            v-model="callback.callbackQuality"
                                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                                            :disabled="callbackStatus"
                                        ></el-rate>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-1" style="padding:0;font-weight:700">描述：</div>
                                    <div class="col-md-9">
                                        <textarea
                                            class="form-control"
                                            rows="3"
                                            placeholder="请输入描述"
                                            v-model="callback.callbackDesc"
                                            maxlength="80"
                                            :disabled="callbackStatus"
                                        ></textarea>
                                    </div>
                                </div>
                                <div class="row" style="margin-top:100px">
                                    <div class="col-md-1 col-md-offset-4">
                                        <button
                                            type="button"
                                            class="btn btn-block btn-primary"
                                            @click="getEventCallback"
                                            v-if="!callbackStatus"
                                        >提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"/>
    </div>
</template>

<script>
import bigImg from "@/components/common/bigImg.vue";
import utils from "@/utils";

export default {
    data() {
        return {
            form: {},
            showImg: false,
            imgSrc: "",
            callback: {
                orderId: "",
                callbackService: null,
                callbackSpeed: null,
                callbackQuality: null,
                callbackDesc: ""
            },
            callbackStatus: false
        };
    },
    components: {
        bigImg
    },
    mounted() {
        this.getForm();
        if (this.$route.query.status == 1) {
            console.log(1111);
        }
        if (this.$route.query.status == 2) {
            $(this.$refs["nav-tabs1"])
                .find("a")
                .trigger("click");
        }
    },
    methods: {
        clickImg(e) {
            this.showImg = true;
            // 获取当前图片地址
            this.imgSrc = e.currentTarget.src;
        },
        viewImg() {
            this.showImg = false;
        },
        //获取详情
        getForm() {
            this.$api.shihou
                .afterDetail({
                    orderId: this.$route.query.orderId
                })
                .then(res => {
                    if (res.success) {
                        this.form = res.data.info;
                        if (res.data.callback != null) {
                            this.callback = res.data.callback;
                            this.callbackStatus = true;
                        } else {
                            this.callbackStatus = false;
                        }
                        // console.log(res);
                    }
                });
        },
        getEventCallback() {
            this.callback.orderId = this.form.orderId;
            this.$api.shihou.addCallback(this.callback).then(res => {
                if (res.success) {
                    this.$$message({
                        message: "恭喜您，回访成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "later" });
                }
            });
        },
        getDate() {
            return utils.getDate();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-head {
    padding: 0;
    .c-top {
        padding: 15px;
        margin: 0px;

        img {
            width: 90px;
            height: 90px;
        }
        p {
            margin: 0;
            line-height: 30px;
        }
    }
}
.event {
    .title {
        padding-left: 10px;
        line-height: 20px;
        span {
            display: inline-block;
            margin-right: 10px;
            line-height: 20px;
        }
        i {
            line-height: 20px;
        }
        em {
            width: 0px;
            border-left: 1px solid black;
        }
    }
    .c-span2 {
        display: inline-block;
        word-wrap: break-word;
        word-break: normal;
        width: 100%;
    }
    .content {
        min-height: 0px;
        .col-md-1 {
            text-align: right;
            color: #7a797a;
        }
        .col-md-5 {
            color: #7a797a;
        }
    }
    .photo {
        padding: 30px;
        img {
            width: 90px;
            height: 90px;
            cursor: pointer;
        }
    }
}
.huifang {
    .row {
        margin: 17px 0;
    }
    .col-md-1 {
        text-align: right;
        height: 32px;
        line-height: 32px;
    }
    .col-md-5 {
        height: 32px;
        line-height: 32px;
        color: #b2afb3;
    }
    select {
        width: 200px;
        height: 32px;
        line-height: 32px;
        padding-top: 4px;
        color: #b2afb3;
        border-radius: 5px;
    }
    .el-rate {
        padding: 6px 0;
    }
}
</style>
